<template>
  <div class="container-fluid" id="container_curr">
    <div id="content_main">
      <!--      搜索信息-->
      <div id="search_container">
        <el-row
            :gutter="15"
            justify="center"
            style="width: 100%;text-align: center; height: 70px; padding-top: 20px; margin-right: 0">
          <el-col :span="4">
            <el-input v-model="searchInfo.startCity">
              <template #suffix>
                <span>出发地</span>
              </template>
            </el-input>
          </el-col>

          <el-col :span="1">
            <el-button :icon="Switch" circle/>
          </el-col>

          <el-col :span="4">
            <el-input v-model="searchInfo.endCity">
              <template #suffix>
                <span>目的地</span>
              </template>
            </el-input>
          </el-col>

          <el-col :span="5">
            <el-date-picker
                v-model="searchInfo.date"
                type="date"
                placeholder="出发日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
            />
          </el-col>


          <el-col :span="2">
            <el-button @click="cb">
              搜索
            </el-button>
          </el-col>
        </el-row>
      </div>
      <!--      过滤筛选-->
      <div id="filter_container">
        <strong style="text-align: center;padding-top: 5px">搜索类型:</strong>
        <div style="margin-left: 20px;">
          <el-checkbox label="全部" v-model="allFilter" @change="filterAll"/>
          <el-checkbox label="航班" v-model="isPlane" @change="filterChangePlane"/>
          <el-checkbox label="火车" v-model="isTrain" @change="filterChangeTrain"/>
          <el-checkbox label="汽车" v-model="isBus" @change="filterChangeBus"/>
        </div>
      </div>
      <!--      搜索结果-->
      <div id="result_container" v-loading="loading">
        <el-affix :offset="59">
          <!--        顶部标题信息-->
          <div id="list_title">
            <strong>
              {{ searchInfo.startCity }}
              <b class="to_line"></b>
              {{ searchInfo.endCity }}
            </strong>
            &nbsp;&nbsp;
            <span style="font-weight: 400;font-size: 12px;color: #999;">
                  {{ searchDate }}&nbsp;
                  <b>{{ allResultSize }}个结果</b>
              </span>
          </div>
          <!--        子标题-->
          <div class="sub_title">
              <span class="up_span">
                <i style="cursor: pointer;">出发时间</i>
                <b class="up"></b>
              </span>
            <span class="center_span">
                <i style="cursor: pointer;">到达时间</i>
                <b class="up"></b>
              </span>
            <span class="right_span">
                <i style="cursor: pointer;">价格</i>
                <b class="right"></b>
              </span>
          </div>
        </el-affix>
        <!--      结果展示-->
        <div class="d-flex flex-column" style="width: 100%;">
          <!--          飞机票-->
          <strong
              style="position: relative; top: 100px; font-size: 24px"
              v-if="searchResultPlane.length === 0 && searchResultTrain.length === 0 && searchResultBus.length === 0">
            无信息
          </strong>
          <div class="result-container"
               v-for="(item, index) in searchResultPlane"
          >

            <div style="display: flex;
                        align-items: center;
                        padding-right: 30px;">

              <div class="vehicle-type vehicle-plane"></div>

            </div>
            <div class="plane_info">
              <div class="logo" :class="logoStyle(item.airlineCompany)">
              </div>
              <div class="sec">
                <p style="font-size: 14px;font-weight: 700;">{{ item.airlineCompany }}</p>
                <span style="font-size: 14px;color: #999;">{{ item.aircraft }}</span>
              </div>
            </div>
            <div class="time_info">
              <div class="start_time">
                <strong>{{ item.planLeaveTime.split(' ')[1] }}</strong>
                <em>{{ item.leavePort }}</em>
              </div>
              <div class="line_to">
                <i>2h20m</i>
                <b></b>
              </div>
              <div class="start_time">
                <strong>{{ item.realLeaveTime.split(' ')[1] }}</strong>
                <em>{{ item.arrivePort }}</em>
              </div>
            </div>
            <div class="jiage">
              <strong>
                <em>￥{{ item.price }}</em>
                <b>起</b>
              </strong>
            </div>
            <div class="buy_button">
              <el-button
                  @click="doThis(index)"
                  type="warning"
                  plain>选择
              </el-button>
            </div>
          </div>
          <!--          火车票-->
          <div class="result-container"
               v-for="(item,index) in searchResultTrain">
            <div style="display: flex;
                        align-items: center;
                        padding-right: 30px;">
              <div class="vehicle-type vehicle-train"></div>

            </div>
            <div class="plane_info">
              <div>
              </div>
              <div class="sec">
                <p style="font-size: 14px;font-weight: 700;">{{ item.trainNo }}</p>
              </div>
            </div>
            <div class="time_info">
              <div class="start_time">
                <strong>{{ item.startTime }}</strong>
                <em>{{ item.startStation }}</em>
              </div>
              <div class="line_to">
                <i>{{ item.spendTime }}</i>
                <b></b>
              </div>
              <div class="start_time">
                <strong>{{ item.endTime }}</strong>
                <em>{{ item.endStation }}</em>
              </div>
            </div>
            <div class="jiage">
              <strong>
                <em>￥{{ item.secondPrice }}</em>
                <b>起</b>
              </strong>
            </div>
            <div class="buy_button">
              <el-button
                  @click="doThisTrain"
                  type="warning"
                  plain>详情
              </el-button>
            </div>
          </div>
          <!--          汽车票-->
          <div class="result-container"
               v-for="(item,index) in searchResultBus">
            <div style="display: flex;
                        align-items: center;
                        padding-right: 30px;">
              <div class="vehicle-type vehicle-bus"></div>

            </div>
            <div class="plane_info">
              <div>
              </div>
              <div class="sec">
                <p style="font-size: 14px;font-weight: 700;">{{ item.busType }}</p>
              </div>
            </div>
            <div class="time_info">
              <div class="start_time">
                <strong>{{ item.startTime }}</strong>
                <em>{{ item.startPlace }}</em>
              </div>
              <div class="line_to">
                <i>"?"</i>
                <b></b>
              </div>
              <div class="start_time">
                <strong>{{ "?" }}</strong>
                <em>{{ item.endPlace }}</em>
              </div>
            </div>
            <div class="jiage">
              <strong>
                <em>￥{{ item.price }}</em>
                <b>起</b>
              </strong>
            </div>
            <div class="buy_button">
              <el-button
                  @click="doThisBus(index)"
                  type="warning"
                  plain>选择
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
      v-model="dialogTableVisible"
      title="订票"
      :close-on-click-modal="false">
    <el-row justify="center">
      <el-col span="12">
        <el-table :data="tableData" stripe style="width: 100%; text-align: center; margin-bottom: 10px" border>
          <el-table-column prop="key" label="标签" width="100"/>
          <el-table-column prop="value" label="值" width="150"/>
        </el-table>
        <el-button style="width: 10px"
                   :disabled="ticketCount <= 0"
                   @click="ticketCount--">
          <el-icon>
            <Minus/>
          </el-icon>
        </el-button>
        &nbsp;&nbsp;{{ ticketCount }}&nbsp;
        <el-button style="width: 10px; margin-left: 5px"
                   @click="ticketCount++">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-button>
      </el-col>
    </el-row>

    <template #footer>
      <span>总计<em
          style="color: #ff5346;font-size: 16px">￥{{ ticketCount * Number.parseInt(tableData[7].value) }}</em></span>&nbsp;&nbsp;
      <el-button type="success" @click="dialogConfirm">确定</el-button>
      <el-button type="warning" @click="dialogCancel">取消</el-button>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogTableVisibleBus"
      title="汽车票"
      :close-on-click-modal="false">
    <el-row justify="center">
      <el-col span="12">
        <el-table :data="tableDataBus" stripe style="width: 100%; text-align: center; margin-bottom: 10px" border>
          <el-table-column prop="key" label="标签" width="100"/>
          <el-table-column prop="value" label="值" width="150"/>
        </el-table>
        <el-button style="width: 10px"
                   :disabled="ticketCount <= 0"
                   @click="ticketCount--">
          <el-icon>
            <Minus/>
          </el-icon>
        </el-button>
        &nbsp;&nbsp;{{ ticketCount }}&nbsp;
        <el-button style="width: 10px; margin-left: 5px"
                   @click="ticketCount++">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-button>
      </el-col>
    </el-row>

    <template #footer>
      <span>总计<em
          style="color: #ff5346;font-size: 16px">￥{{ ticketCount * Number.parseInt(tableDataBus[4].value) }}</em></span>&nbsp;&nbsp;
      <el-button type="success" @click="dialogConfirmBus">确定</el-button>
      <el-button type="warning" @click="dialogCancelBus">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive, computed, onMounted, useCssModule, watch} from "vue";
import {useStore} from 'vuex'
import {Switch, Minus, Plus} from "@element-plus/icons-vue"
import constant from "../../constant";
import axios from "axios";
import {ElNotification} from 'element-plus'

const style = useCssModule()
// 加载
let loading = ref(true)
let store = useStore()
// 关键字
let searchKey = ref(store.state.searchData)
// 购票信息
let searchInfo = reactive({
  startCity: store.state.orientation,
  endCity: searchKey.value,
  date: store.state.getDate('')
})
let allFilter = ref(true)
// 所有航班
let planeInfo = constant.PlaneInfo
// 所有火车
let trainInfos
// 所有车票
let busInfo = constant.BusInfo
// 航班搜索结果
let searchResultPlane = ref(constant.PlaneInfo.flightInfos)
// 火车票搜索结果
let searchResultTrain = ref([{}])
// 汽车搜索结果
let searchResultBus = ref(constant.BusInfo.busInfos)
// 暂时存储
let planeTemp = []
let trainTemp = []
let busTemp = []
// 机票对话框数据
let tableData = [
  {
    key: '出发日期',
    value: ''
  },
  {
    key: '出发地',
    value: '北京'
  },
  {
    key: '目的地',
    value: '北京'
  },
  {
    key: '出发机场',
    value: '北京'
  },
  {
    key: '到达机场',
    value: '北京'
  },
  {
    key: '航班号',
    value: '北京'
  },
  {
    key: '机型',
    value: '北京'
  },
  {
    key: '价格',
    value: '北京'
  },
]
// 汽车票对话框数据
let tableDataBus = [
  {
    key: '出发日期',
    value: ''
  },
  {
    key: '出发时间',
    value: '北京'
  },
  {
    key: '出发地',
    value: '北京'
  },
  {
    key: '目的地',
    value: '北京'
  },
  {
    key: '价格',
    value: '北京'
  }
]
// 日期
let searchDate = computed(() => {
  if (searchInfo.date === '')
    return store.state.getDate('')
  else
    return store.state.getDate(searchInfo.date)
})
// 所有结果的数量
let allResultSize = computed(() => {
  return searchResultPlane.value.length + searchResultTrain.value.length + searchResultBus.value.length
})
let dialogTableVisible = ref(false)
let dialogTableVisibleBus = ref(false)

let ticketCount = ref(1)

let isPlane = ref(true)
let isTrain = ref(true)
let isBus = ref(true)

// logo样式
function logoStyle(company) {
  console.log(company)
  switch (company) {
    case '海南航空'     :
      return style.hu
    case '中国国际航空'  :
      return style.ca
    case '南方航空'     :
      return style.cz
    case '中国联合航空'  :
      return style.kn
    case '东方航空'     :
      return style.mu
  }
}

// 根据出发城市过滤
function leaveCitySearch(city, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.leaveCity.includes(city)) return true
  })
}

function leaveCitySearchTrain(city, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.startCity.includes(city)) return true
  })
}

function leaveCitySearchBus(city, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.startPlace.includes(city)) return true
  })
}

// 根据目标城市过滤
function arriveCitySearch(city, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.arriveCity.includes(city)) return true
  })
}

function arriveCitySearchTrain(city, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.endCity.includes(city)) return true
  })
}

function arriveCitySearchBus(city, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.endPlace.includes(city)) return true
  })
}

// 根据出发时间过滤
function leaveTimeSearch(date, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.planLeaveTime.includes(date)) return true
  })
}

function leaveTimeSearchTrain(date, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.date.includes(date)) return true
  })
}

function leaveTimeSearchBus(date, arr) {
  if (arr.length === 0) return []
  return arr.filter((item) => {
    if (item.date.includes(date)) return true
  })
}

/**
 *  搜索逻辑
 * @param start 出发地
 * @param end  目的地
 * @param date 日期
 * @param data 原始数据
 */
function onSearch(start, end, date, data) {
  let result = leaveCitySearch(start, data)
  if (end !== '') {
    let temp = arriveCitySearch(end, result)
    if (temp.length !== 0) result = temp
  }
  if (result.length === 0) return []
  if (date !== '') {
    let temp = leaveTimeSearch(date, result)
    if (temp.length !== 0) result = temp
  }
  return result
}

function onSearchTrain(start, end, date, data) {
  let result = leaveCitySearchTrain(start, data)
  if (end !== '') {
    let temp = arriveCitySearchTrain(end, result)
    if (temp.length !== 0) result = temp
  }
  if (result.length === 0) return []
  if (date !== '') {
    let temp = leaveTimeSearchTrain(date, result)
    if (temp.length !== 0) result = temp
  }
  return result
}

function onSearchBus(start, end, date, data) {
  let result = leaveCitySearchBus(start, data)
  console.log("根据出发地:", result)
  if (result.length === 0) return []
  if (end !== '') {
    let temp = arriveCitySearchBus(end, result)
    console.log("根据目的地:", temp)
    if (temp.length !== 0) result = temp
  }
  if (date !== '') {
    let temp = leaveTimeSearchBus(date, result)
    console.log("根据时间:", temp)
    if (temp.length !== 0) result = temp
  }
  console.log("最终结果:", result)
  return result
}

function cb() {
  loading.value = true
  const start = searchInfo.startCity
  const end = searchInfo.endCity
  const date = searchInfo.date
  setTimeout(() => {
    // 读取航班
    axios.get('plane-tickets.json').then((res) => {
      planeInfo = res.data
      console.log(res.data)
      planeTemp = onSearch(start, end, date, planeInfo.flightInfos)
      searchResultPlane.value = planeTemp
    })
    // 读取火车
    axios.get('train-tickets.json').then((res) => {
      trainInfos = res.data
      console.log(res.data)
      trainTemp = onSearchTrain(start, end, date, trainInfos.trainInfo)
      searchResultTrain.value = trainTemp
    })
    // 读取汽车
    axios.get('bus-tickets.json').then((res) => {
      busInfo = res.data
      console.log(res.data)
      busTemp = onSearchBus(start, end, date, busInfo.busInfo)
      searchResultBus.value = busTemp
    })


    loading.value = false
  }, 500)
}

function filterChangePlane(value) {
  allFilter.value = value && isTrain.value && isBus.value
  if (planeTemp.length > 1 && value) {
    searchResultPlane.value = planeTemp
  }
  if (!value && searchResultPlane.value.length !== 0) {
    console.log("2" + (!value && searchResultPlane.value.length !== 0))
    searchResultPlane.value = []
  }
}

function filterChangeTrain(value) {
  allFilter.value = isPlane.value && value && isBus.value
  if (trainTemp.length > 1 && value) {
    searchResultTrain.value = trainTemp
  }
  if (!value && searchResultTrain.value.length !== 0) {
    searchResultTrain.value = []
  }
}

function filterChangeBus(value) {
  allFilter.value = isPlane.value && isTrain.value && value
  console.log(busTemp)
  if (busTemp.length > 1 && value) {
    searchResultBus.value = busTemp
  }
  if (!value && searchResultBus.value.length !== 0) {
    searchResultBus.value = []
  }
}

function filterAll(value) {
  if (isPlane.value !== value)
    isPlane.value = value
  if (isTrain.value !== value)
    isTrain.value = value
  if (isBus.value !== value)
    isBus.value = value
  if (allFilter.value) {
    searchResultPlane.value = planeTemp
    searchResultTrain.value = trainTemp
    searchResultBus.value = busTemp
  } else {
    searchResultPlane.value = []
    searchResultTrain.value = []
    searchResultBus.value = []
  }
}

function doThis(index) {
  let selectedData = searchResultPlane.value[index]
  // 出发日期
  tableData[0].value = selectedData.planLeaveTime
  // 出发地
  tableData[1].value = selectedData.leaveCity
  // 目的地
  tableData[2].value = selectedData.arriveCity
  // 出发机场
  tableData[3].value = selectedData.leavePort
  // 到达机场
  tableData[4].value = selectedData.arrivePort
  // 航班号
  tableData[5].value = selectedData.flightNo
  // 机型
  tableData[6].value = selectedData.aircraft
  // 价格
  tableData[7].value = selectedData.price
  dialogTableVisible.value = true
}

function doThisBus(index) {
  let selectedData = searchResultBus.value[index]
  // 出发日期
  tableDataBus[0].value = selectedData.date
  // 出发时间
  tableDataBus[1].value = selectedData.startTime
  // 出发地
  tableDataBus[2].value = selectedData.startPlace
  // 目的地
  tableDataBus[3].value = selectedData.endPlace
  // 价格
  tableDataBus[4].value = selectedData.price
  dialogTableVisibleBus.value = true
}

// 对话框确定
function dialogConfirm() {
  dialogTableVisible.value = false
  ElNotification({
    title: '通知',
    message: '订票成功',
    type: 'success',
  })
}

// 对话框取消
function dialogCancel() {
  dialogTableVisible.value = false
  ElNotification({
    title: '注意',
    message: '您取消了订票',
    type: 'warning',
  })
}

// 汽车对话框确定
function dialogConfirmBus() {
  dialogTableVisibleBus.value = false
  ElNotification({
    title: '通知',
    message: '订票成功',
    type: 'success',
  })
}

// 汽车对话框取消
function dialogCancelBus() {
  dialogTableVisibleBus.value = false
  ElNotification({
    title: '注意',
    message: '您取消了订票',
    type: 'warning',
  })
}

function doThisTrain() {
  let trainInfo = store.state.trainSearchInfo
  trainInfo.startPlace = searchInfo.startCity
  trainInfo.endPlace = searchInfo.endCity
  trainInfo.date = searchInfo.date
  store.commit('trainSearch', trainInfo)
  store.commit('navigationChange', 'train')
}

onMounted(() => {
  cb()
})


</script>

<style scoped>
#container_curr {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #F3F5F9;
  text-align: center;
}

#content_main {
  width: 1190px;
  margin: auto;
}

#search_container {
  width: 100%;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  /*display: flex;*/
  /*justify-content: space-between;*/
}

#filter_container {
  padding-top: 20px;
  text-align: center;
  min-height: 70px;
  width: 100%;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

#result_container {
  min-height: 500px;
  width: 100%;
  /*background-color: #FFFFFF;*/
  margin-bottom: 20px;
}

#list_title {
  height: 34px;
  background: #ebebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.to_line {
  width: 30px;
  height: 10px;
  margin: 0 5px;
  background: url(../../assets/toline.png) no-repeat 50%;
  background-size: contain;
  display: inline-block;
}

strong {
  font-size: 16px;
}

.sub_title {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 46px;
  font-size: 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  background: #fff;
  box-sizing: border-box;
  justify-content: center;
}

.up {
  width: 12px;
  height: 14px;
  margin-left: 5px;
  font-weight: 400;
  background: url(../../assets/up.png) no-repeat 50%;
}

.up_span {
  margin-left: 185px;
  display: flex;
  align-items: center;
  color: #333;
  font: normal normal normal 12px/20px Arial, sans-serif;
}

.center_span {
  margin-left: 140px;
  display: flex;
  align-items: center;
  color: #333;
  font: normal normal normal 12px/20px Arial, sans-serif;
}

.right_span {
  margin-left: 130px;
  display: flex;
  align-items: center;
  color: #00c77b;
  font: normal normal normal 12px/20px Arial, sans-serif;
}

.right {
  width: 12px;
  height: 14px;
  margin-left: 5px;
  font-weight: 400;
  background: url(../../assets/right.png) no-repeat 50%;
}

.result-container {
  margin-bottom: 10px;
  display: flex;
  background-color: #FFFFFF;
  justify-content: center;
}

.plane_info {
  margin-right: 30px;
  margin-left: 30px;
  text-align: center;
  width: 160px;
  height: 108px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-left: 2px;
  background-size: contain !important;
  background-position: 50% !important;
}

.sec {
  min-width: 112px;
  margin-left: 15px;
  -webkit-box-flex: 1;
}

.time_info {
  display: flex;
  align-items: center;
  width: 256px;
  justify-content: space-between;
}

.start_time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.start_time strong {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 4px;
}

.start_time em {
  font-size: 12px;
  color: #999;
}

.line_to {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.line_to i {
  color: #999;
  position: relative;
  font-style: normal;
}

.line_to b {
  width: 73px;
  height: 6px;
  background: url(../../assets/toline.png) no-repeat 50%;
}

.jiage {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-right: 16px;
  width: 106px;
  white-space: nowrap;
  text-align: center;
  margin-left: 106px;
}

.jiage strong {
  font-weight: 400;
}

.jiage strong em {
  color: #ff5346;
  font-size: 18px;
}

.jiage strong b {
  font-size: 14px;
}

.buy_button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-direction: column;
}

.vehicle-type {
  position: relative;
  width: 32px;
  height: 32px;
  /*background: red;*/

  display: inline-block;
  margin-left: 2px;
  background-size: contain !important;
  background-position: 50% !important;
}

.vehicle-plane {
  background: url(../../assets/plane.svg) no-repeat;
}

.vehicle-train {
  background: url(../../assets/train.svg) no-repeat;
}

.vehicle-bus {
  background: url(../../assets/bus.svg) no-repeat;
}
</style>

<style module>
/* 海南航空 */
.hu {
  background: url(../../assets/images-company-logo/HU.svg) no-repeat;
}

/* 中国国际航空 */
.ca {
  background: url(../../assets/images-company-logo/CA.svg) no-repeat;
}

/* 南方航空 */
.cz {
  background: url(../../assets/images-company-logo/CZ.svg) no-repeat;
}

/* 中国联合航空 */
.kn {
  background: url(../../assets/images-company-logo/KN.svg) no-repeat;
}

/* 东方航空 */
.mu {
  background: url(../../assets/images-company-logo/MU.svg) no-repeat;
}
</style>